extends ../../components/layout
append style
  +css('orderBooking/orderBooking.css')
block title
  title 订单填写
block content
  include ../../components/data/ticketData
  .gzl-page
    section.gzl-section.booking-section
      // 订单信息
      .booking-top
        a(href="#")
          h1.booking-tit
            strong 花城汇MAG魔幻世界夜光3D城+迷离幻视馆亲子套票
          .gzl-flex.booking-serve
            .gzl-flex__item 自主选择出发日期
            span.font-orange 预订须知
              +icon('#icon-arrow-right')
      // 填写联系人
      - var bkcontact = ['取票人','证件类型','证件号码','手机号码','电子邮箱']
      .booking-contact
        -for(var i=0;i<bkcontact.length;i++)
          .gzl-cell(class=[bkcontact[i] === '证件类型'?'gzl-cell_access':''])
            .gzl-label #{bkcontact[i]}
            .gzl-cell__bd
              if bkcontact[i] === '证件类型'
                .gzl-select.placeholder.document-select 请输入#{bkcontact[i]}
              else
                input.gzl-input(placeholder='请输入'+bkcontact[i])
            if bkcontact[i] === '证件类型'
              .gzl-cell__ft
      // 票券信息
      .ticket-booking-info
        .gzl-cell.gzl-cell_access
          .gzl-label 使用日期
          .gzl-cell__bd
            .use-date.tr.placeholder
              span(data-target='cur') 请选择
          .gzl-cell__ft
        .gzl-cell.gzl-cell_access
          .gzl-label 场次选择
          .gzl-cell__bd
            .site-select.tr.placeholder 请选择
          .gzl-cell__ft
        .gzl-cell.gzl-cell_access.ticket-collection
          .gzl-label 取票方式
          .gzl-cell__bd
            .collection-type.tr.placeholder 请选择
          .gzl-cell__ft
        .gzl-cell
          .gzl-label 收件人
          .gzl-cell__bd
            input.gzl-input(placeholder='请输入收件人')
        .gzl-cell
          .gzl-label 手机号码
          .gzl-cell__bd
            input.gzl-input(placeholder='请输入手机号码')
        .gzl-cell.gzl-cell_access
          .gzl-label 所在地区
          .gzl-cell__bd
            .city-select.gzl-select.placeholder 请选择
          .gzl-cell__ft
        .gzl-cell
          .gzl-label 详细地址
          .gzl-cell__bd
            input.gzl-input(placeholder='请输入详细地址')
      // 票券数量选择
      .ticket-booking-num.gzl-cell
        .gzl-cell__bd 门票数量
        .gzl-count
          span.gzl-count__minus.disabled(data-min="1")
            +icon('#icon-minus')
          .gzl-count__num 1
          span.gzl-count__plus(data-max="5")
            +icon('#icon-plus')
      .ticket-booking-numlist(data-min="1",data-max="20")
        .gzl-cell
          .gzl-cell__bd 门票数量
            em.gzl-cell__tip (限购20张)
          .gzl-cell__ft 
            span.total-num 1
            | 张
        .ticket-num-item
          -for(var i=0;i<ticketType.length;i++)
            .gzl-flex
              .gzl-flex__item #{ticketType[i].typeStr}
              .gzl-count(data-type=ticketType[i].type)
                span.gzl-count__minus(class=[i>0?' disabled':''])
                  +icon('#icon-minus')
                .gzl-count__num #{ticketType[i].num}
                span.gzl-count__plus
                  +icon('#icon-plus')
      // 游客选择
      .tourist-select
        .tourist-select-hd
          .gzl-cell
            strong 游客信息
            em.gzl-cell__tip （点击游客信息可更换对应类型的游客）
        ul.tourist-sel-list
          li(data-type="adult")
            +icon('#icon-plus')
            | 选择成人
        ul.tourist-info-list
      // (可选服务,保险,优惠规则,备注)
      +otherBlock
    footer.gzl-footer
    +footbar('../cashierDesk/cashierDesk.html')
append script
  script(type="text/template", id="tourist-select")
    <% if(type === 'adult'){ %>
    li(data-type!="<%- type %>")
      +icon('#icon-plus')
      | 选择成人
    <% } else if(type === 'child'){ %>
    li(data-type!="<%- type %>")
      +icon('#icon-plus')
      | 选择儿童
    <% } else { %>
    li(data-type!="<%- type %>")
      +icon('#icon-plus')
      | 选择长者
    <% } %>
  script(type="text/template", id="contact-select")
    .gzl-page.contact-select-page
      .gzl-section
        .gzl-cell__title 请选择3名成人
        .contact-add 新增游客
        ul.contact-list
          <% _.each(list, function(e, i){ %>
          li.gzl-flex.contact-item(data-index!="<%- i %>")
            .gzl-flex__item.gzl-flex_acenter
              .contact-check
                <% if (e.checkState !== 'uncheck') {%>
                  <% if (e.checkType === type) {%>
                    +icon("#icon-check")(class="checked")
                  <% } else { %>
                    +icon("#icon-checked")
                  <% } %>
                <% } else { %>
                  +icon("#icon-uncheck")
                <% } %>
              .gzl-flex__item
                span.contact-name <%= e.name %>
                span.contact-tel <%= e.mobile %>
                .contact-code 
                  label <%= e.cardTypeName %>：
                  span <%= e.cardNm %>
                <% if (!e.name || !e.mobile) {%>
                  .contact-tip.font-warn 信息不全，请编辑补充
                <% } %>
            .contact-edit
              +icon
          <% }) %>
      .gzl-footbar
        .gzl-flex__item
          .btn.btn-default.cancel-btn 取消
        .gzl-flex__item
          .btn.confirm-btn 确认
  script(type="text/template", id="tourist-list")
    <% if (list.length>0) { %>
    li.booking-list-item(class!="<%-type+'-info'%>", data-type!="<%-type%>")
      .booking-list-tip(class!="<%-type%>") <%= typeStr %>
      .booking-list-bd
        <% _.each(list, function(e, i){ %>
        .gzl-cell(data-index!="<%-e.index%>")
          +icon('#icon-tourist')
          span.tourist-name <%= e.name %>
          span.tourist-tel <%= e.mobile %>
          span.tourist-id <%= e.cardNm %>
        <% }) %>
    <% } %>
  script(type="text/template", id="contact-edit")
    .gzl-page.contact-edit-page
      .gzl-section
        .gzl-cell__title 基本信息
        .gzl-cell
          .gzl-label 中文姓
            span.required *
          .gzl-cell__bd
            input.gzl-input(placeholder='请与证件保持一致')
        .gzl-cell
          .gzl-label 中文名
            span.required *
          .gzl-cell__bd
            input.gzl-input(placeholder='请与证件保持一致')
        .gzl-cell
          .gzl-label 英文姓
          .gzl-cell__bd
            input.gzl-input(placeholder='请与证件上姓一致')
        .gzl-cell
          .gzl-label 英文名
          .gzl-cell__bd
            input.gzl-input(placeholder='请与证件上姓一致')
        .gzl-cell
          .gzl-label 手机号码
            span.required *
          .gzl-cell__bd
            input.gzl-input(placeholder='请输入手机号码')
        .gzl-cell
          .gzl-label 电子邮箱
          .gzl-cell__bd
            input.gzl-input(placeholder='请输入邮箱(选填)')
        .gzl-cell__title 证件信息
        .gzl-cell
          .gzl-label 身份证
            +icon("#icon-arrow-right")
          .gzl-cell__bd
            .gzl-select.placeholder 请输入证件号码(必填)
        .gzl-cell.gzl-cell_access
          .gzl-label 证件有效期
          .gzl-cell__bd
            .gzl-select.placeholder 请选择有效期
          .gzl-cell__ft
        .gzl-cell__title 其他信息
        .gzl-cell
          .gzl-label 生日
          .gzl-cell__bd
            input.gzl-input(placeholder='请选择出生日期')
        .gzl-cell
          .gzl-label 性别
          .gzl-cell__bd
            input.gzl-input(placeholder='请选择出生日期')
      .gzl-footbar
        .gzl-flex__item
          .btn.confirm-btn 保存
  script(type="text/template", id="footbar-popup")
    .order-price-detail
      ul.price-list
        <% _.each(list, function(e, i){ %>
        li
          .price-list-bd.gzl-flex
            .gzl-flex__item <%= e.con %>
            span.price-item
              em.font-warn ￥<%= e.price %>
              | ×<%= e.num %>
        <% }) %>
      strong.tit-item 可选服务
      ul.other-list
        <% _.each(serve, function(e, i){ %>
        li.gzl-flex
          .gzl-flex__item <%= e.con %>
          .price-item
            em.font-warn ￥<%= e.price %>
            | ×<%= e.num %>
        <% }) %>
      strong.tit-item 优惠信息
      ul.other-list
        <% _.each(discounts, function(e, i){ %>
        li.gzl-flex
          .gzl-flex__item <%= e.con %>
          .price-item
            em.font-warn -￥<%= e.price %>
        <% }) %>
  +js('orderBooking/ticketOrderBooking.js')
